<template>
    <!-- <el-form :model="searchForm" ref="searchFormRef" label-width="auto" style="padding-bottom: 1.5rem">
        <el-row :gutter="24">
            <el-col :span="6">
                <el-form-item label="状态：" prop="status">
                    <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
                        <el-option v-for="item in statusList" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form> -->
    <ArtTable :data="props.tableData" :loading="props.tableLoading" :currentPage="props.pageNum"
        :pageSize="props.pageSize" :total="props.pageTotal" @current-change="currentChange" @size-change="sizeChange">
        <template #default>
            <el-table-column label="驾校信息" prop="storeName" />
            <el-table-column label="套餐名称" prop="productName" align="center" />
            <el-table-column label="实付金额" prop="orderAmount" align="center" />
            <el-table-column label="下级信息" prop="realName" align="center">
                <template #default="scope">
                    <div style="display: flex; align-items: center">
                        <img class="avatar" :src="scope.row.avatar" alt="avatar" />
                        <div>
                            <div class="user-name">{{ scope.row.memberName }}</div>
                            <div v-if="scope.row.memberId">ID：{{ scope.row.memberId }}</div>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="佣金类型" prop="productType" align="center" #default="scope">
                <!-- <div>新购/续费</div> -->
                {{ productTypeList[scope.row.productType] }}
            </el-table-column>
            <el-table-column label="佣金比例" prop="commissionRate" align="center" #default="scope">
                {{ scope.row.commissionRate / 100 }}%
            </el-table-column>
            <el-table-column label="佣金金额" prop="incomeAmount" align="center" />
            <el-table-column label="订单号" prop="orderNo" align="center" />
            <el-table-column label="下单时间" prop="createTime" align="center" />
            <el-table-column label="状态" prop="isSettled" align="center" #default="scope">
                {{ scope.row.isSettled === 0 ? '未结算' : '已结算' }}
            </el-table-column>
        </template>
    </ArtTable>
</template>
<script lang="ts" setup>
const props = defineProps<{
    tableData: any[]
    tableLoading: boolean
    pageNum: number
    pageSize: number
    pageTotal: number
}>()

const productTypeList: Record<number, string> = {
    1: '会员卡',
    2: '班型',
    3: '驾校套餐',
    4: '驾校套餐续费'
}

const emit = defineEmits(['current-change', 'size-change', 'refresh-table'])

const currentChange = (val: number) => {
    emit('current-change', val)
}
const sizeChange = (val: number) => {
    emit('size-change', val)
}
</script>
<style lang="scss" scoped>
.avatar {
    width: 36px;
    height: 36px;
    border-radius: 6px;
}
</style>